<template>
  <Card>
    <Button type="primary">
      <!-- 命名/具名插槽：用来显示图标 -->
      <template #icon><PlusOutlined /></template>
      <!-- 默认插槽：用来显示文字 -->
      添加品牌
    </Button>

    <Table
      class="trademark-table"
      :columns="columns"
      :data-source="data"
      bordered
      :pagination="{
        current: 1, // 当前页码
        pageSize: 3, // 每页条数
        total: 1000, // 总数
        pageSizeOptions: ['3', '6', '9', '12'], // 指定每页可以显示多少条
        position: ['bottomCenter'], // 分页器显示位置
        showQuickJumper: true, // 是否可以快速跳转至某页
        showSizeChanger: true, // 是否可以改变 pageSize
        showTotal: (total) => `总共 ${total} 条`, // 用于显示数据总量和当前数据顺序
      }"
    >
      <!-- 
        默认情况下：table每一列渲染的内容看columns - dataIndex 对应值
        下面具名插槽#bodyCell，可以改变要渲染的内容
        "{ text, record, index, column }" 作用域插槽
          text 代表 dataIndex 对应数据的值
          record 代表 整行数据
          index 代表 下标
          column 代表 列的情况

        table结论：
          1. 如果想要直接渲染数据 dataIndex
          2. 如果想要渲染其他内容（不是直接数据）
            按钮 图片等
            用bodyCell方式渲染
      -->
      <template #bodyCell="{ column }">
        <template v-if="column.dataIndex === 'operator'">
          <Button class="trademark-btn">
            <template #icon><EditOutlined /></template>
            更新品牌
          </Button>
          <Button danger>
            <template #icon><DeleteOutlined /></template>
            删除品牌
          </Button>
        </template>
      </template>
    </Table>
  </Card>
</template>

<script lang="ts" setup>
  // 在setup语法中，引入组件会自动注册组件
  import { Card, Button, Table } from 'ant-design-vue';
  // 图标引入才能使用
  import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';

  // table中列
  const columns = [
    {
      title: '序号', // 列头的标题
      dataIndex: 'key', // 渲染data中哪个数据
      width: 80, // 宽度
      align: 'center', // 居中
    },
    {
      title: '品牌名称',
      dataIndex: 'name',
    },
    {
      title: '品牌LOGO',
      dataIndex: 'money',
    },
    {
      title: '操作',
      dataIndex: 'operator',
      width: 300,
    },
  ];
  // table中数据
  const data = [
    {
      key: '1',
      name: 'John Brown',
      money: '￥300,000.00',
      address: 'New York No. 1 Lake Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      money: '￥1,256,000.00',
      address: 'London No. 1 Lake Park',
    },
    {
      key: '3',
      name: 'Joe Black',
      money: '￥120,000.00',
      address: 'Sidney No. 1 Lake Park',
    },
  ];
</script>

<style lang="less" scoped>
  .trademark-table {
    margin-top: 15px;
  }

  .trademark-btn {
    border: 1px solid orange;
    color: orange;
    margin-right: 10px;

    &:hover {
      border: 1px solid rgb(235, 186, 95);
      color: rgb(235, 186, 95);
    }
  }
</style>
